<template>
  <div class="slide">
    <div v-for="item in navDate" class="slideSon">
      <router-link :to="item.path">{{ item.title }}</router-link>
    </div>
  </div>
  <div class="slideContent">
    <router-view></router-view>
  </div>
</template>

<script>
import loading from './components/loading.vue';
import loadingPlus from './components/loadingPlus.vue';
import reverseH from './components/reverseH.vue';
import LofinVer from './components/LofinVer.vue';
import Publicity from "./components/Publicity.vue";
import Report from "./components/views/report/index.vue";
import Event from "./components/views/event/index.vue";
import Counter from "./components/Counter.vue"
import router from "./router/router.js";
import { navDate } from "@/untils/nav";
export default {
  name: 'App',
  components: {
    loading,
    loadingPlus,
    reverseH,
    LofinVer,
    Publicity,
    Report,
    Event,
    router,
    Counter,
  },
  setup() {
    return {
      navDate
    }
  }
};

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;

}

.slide {
  width: 100px;
  height: 300px;
  background-color: rgb(45, 143, 255);
}

.slideContent {
  width: 700px;
}
</style>
